/*----------------------------页面区域---------------------------------*/
<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>前端web对于的api封装,API文件名称------------{{ props.data.name }}</span>
                <el-button class="button" type="text" @click="selectText">选中文本</el-button>
                <el-button class="button" type="text" @click="copyCode">一键复制</el-button>
            </div>
        </template>
         <div class="gfcodeboxwebapi">
    <pre ref="gfcode" class="gfcode">
import api from '@/api/index'           
//  {{ props.data.name }}-------- 代码自动生成部分------------开始
// Creat 新建
export const api{{ props.data.name }}Creat = data =&gt; {
    return api({
        url: '/{{ props.data.apiFile }}/{{ props.data.name }}/creat',
        method: '{{ props.data.type}}',
        data
    })
}
// Update 修改
export const api{{ props.data.name }}Update = data =&gt; {
    return api({
        url: '/{{ props.data.apiFile }}/{{ props.data.name }}/update',
        method: '{{ props.data.type}}',
        data
    })
}
// React 读
export const api{{ props.data.name }}Read = data =&gt; {
    return api({
        url: '/{{ props.data.apiFile }}/{{ props.data.name }}/read',
        method: '{{ props.data.type}}',
        data
    })
}
// Delete 删除
export const {{ props.data.name }}Delete = data =&gt; {
    return api({
        url: '/{{ props.data.apiFile }}/{{ props.data.name }}/delete',
        method: '{{ props.data.type}}',
        data
    })
}
// Delete 批量删除
export const api{{ props.data.name }}DeleteByIds = data =&gt; {
    return api({
        url: '/{{ props.data.apiFile }}/{{ props.data.name }}/deleteByIds',
        method: '{{ props.data.type}}',
        data
    })
}
// List 分页查询
export const api{{ props.data.name }}List = data =&gt; {
    return api({
        url: '/{{ props.data.apiFile }}/{{ props.data.name }}/list',
        method: '{{ props.data.type}}',
        data
    })
}
/*   {{ props.data.name }}--------代码自动生成部分------------结束*/
    </pre>   
    <pre v-for="(item, i) in modelData" :key="i">    
    {
        姓名:"{{ item.name }}",
        年龄:"{{ item.age }}",
        json数据名称:"{{ item.json }}"
    },
    </pre>
         </div>

    </el-card>
</template>
/*----------------------------逻辑区域---------------------------------*/
<script setup>
import {ref,getCurrentInstance, reactive  } from 'vue'
const { proxy } = getCurrentInstance()
const gfcode = ref(null)
const modelData = reactive([
    {
        name:"张三",
        age:13,
        json:"zhangsan"
    },
        {
        name:"李四",
        age:24,
        json:"lisi"
    },
    {
        name:"王五",
        age:35,
        json:"wangwu"
    }
])
const props = defineProps({
    data: {
        type: Object
    }
})
function copyCode(){
    proxy.$copyText(gfcode.value.innerHTML).then(function (e) {
          proxy.$message.success('复制成功')
          console.log(e)
        }, function (e) {
          proxy.$message.error("复制失败")
          console.log(e)
        })
}
function selectText(){
    var range = document.createRange();
    var referenceNode =  document.getElementsByClassName("gfcodeboxwebapi").item(0); 
    console.log(referenceNode);
    range.selectNodeContents(referenceNode);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range) 
}
</script>
<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
.box-card {
    width: 480px;
}
.gfcode {
    background-color: #f3f4f6;
    padding: 20px;
}
</style>

